<template>
  <div class="classPage">
    <div class="title">用户信息上传</div>

    <div class="form">
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
        label-position="top"
        status-icon
      >
        <el-form-item label="店铺名称" prop="userName1">
          <el-input v-model="ruleForm.userName1" />
        </el-form-item>
        <el-form-item label="店铺类型" prop="userName2">
          <el-input v-model="ruleForm.userName2" />
        </el-form-item>
        <el-form-item label="营业执照上传" prop="userName3">
          <el-upload
              v-model:file-list="ruleForm.userName4"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :limit="3"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <el-form-item label="标识logo上传" prop="userName4">
          <el-upload
              v-model:file-list="ruleForm.userName4"
              class="upload-demo"
              action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
              multiple
              :limit="3"
          >
            <el-button type="primary">点击上传</el-button>
          </el-upload>
        </el-form-item>
        <div class="btns">
          <el-button type="primary">保存</el-button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script setup lang="ts">
  import {reactive} from "vue";

  const ruleForm = reactive({
    userName1: '',
    userName2: '',
    userName3: '',
    userName4: ''
  })
  const rules = reactive({
    userName1: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
    userName2: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
    userName3: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }],
    userName4: [{ required: true, message: 'Please input Activity name', trigger: 'blur' }]
  })
</script>

<style scoped lang="scss">
.classPage {
  .title {
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin: 0 0 30px;
    padding-top: 20px;
  }
  .form {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }
  .btns {
    width: max-content;
    margin: 40px auto 0;
  }
}
</style>
